@charset "utf-8";
@import "base";

header {
    width: 100%;
    background-color: #2b80d9;
    .banner-img {
        img {
            &:hover {
                opacity: .7;
            }
        }
    }
}

section {
    width: 100%;
}

//layaflash引擎部分
@media (max-width: 768px) and (min-width: 480px) {
    .flash-bg .flash-title>h1 {
        font-size: 3em;
    }
}
@media (max-width: 480px) {
    .flash-bg .flash-title>h1 {
        font-size: 2em;
        text-align: center;
    }
}
@media (max-width: 768px) and (min-width: 480px) {
    .flash-bg .flash-title>p {
        font-size: 1.89em;
    }
}
@media (max-width: 480px) {
    .flash-bg .flash-title>p {
        font-size: 1.24em;
        text-align: center;
    }
}
.flash-bg {
    background: url(../img/flash_bg.jpg) no-repeat;
    background-position: 100% 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 768px) {
    .flash-bg {
        background: none;
    }
}
.flash-title {
    h1 {
        font-size: 3.41em;
        font-weight: 700;
        font-family: "microsoft yahei";
        color: #0078d7;
        margin-top: 44px;
        margin-bottom: 29px;
    }
    p {
        font: 2.16em "microsoft yahei";
        color: #666;
    }
}
//layaflash产品介绍
.layaflash {
    background-color: #fbfaf7;
    padding-bottom: 40px;
    border-bottom: 1px solid #eaeaee;
}
.flash-cont {
    padding-top: 60px;
}
.flash-item {
    margin-bottom: 31px;
}
//图标背景
.icon-flash-bg {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    margin-left: 15px;
    transition: all .8s ease-in-out;
    &:hover {
        background-color: #8D8C8C;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
.flash-icon-01 {
    background: url(../img/icon01.png) no-repeat center;
    background-color: #0078d7;
}
.flash-icon-02 {
    background: url(../img/icon02.png) no-repeat center;
    background-color: #0078d7;
}
.flash-icon-03 {
    background: url(../img/icon03.png) no-repeat center;
    background-color: #0078d7;
}
.flash-icon-04 {
    background: url(../img/icon04.png) no-repeat center;
    background-color: #0078d7;
}
//flash介绍
.flash-introduce {
    h3 {
        font-size: 1.37em;
        margin-top: 0;
        color: #333;
    }
    p {
        font-size: 1em;
        color: #666;
        line-height: 25px;
    }
}

//layabox的优势
.laya-advantage {
    padding: 89px 0;
    background-color: #fff;
}
@media (max-width: 768px) {
    .laya-advantage {
        padding: 0;
    }
}
.advantage-img {
    padding-top: 101px;
    .img-hover:hover {
        opacity: .8;
    }
}
.advantage-title {
    h1 {
        font-family: "microsoft yahei";
        font-size: 3.43em;
        font-weight: bold;
        color: #8fc31f;
    }
}
@media (max-width: 768px) and (min-width: 480px) {
    .advantage-title h1 {
        font-size: 3em;
    }
}
@media (max-width: 480px) {
    .advantage-title h1 {
        font-size: 2em;
        text-align: center;
    }
}
.advantage-body {
    padding-top: 32px;
    ul {
        list-style: none;
        padding: 0;
        li {
            padding: 8px 0;
            line-height: 50px;
        }
    }
    .ad-bg {
        float: left;
        height: 54px;
        width: 54px;
        border-radius: 50%;
        background-color: #8fc31f;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 10px;
    }
    .ad-icon-01 {
        background-image: url(../img/icon05.png);
        
    }
    .ad-icon-02 {
        background-image: url(../img/icon06.png);
        
    }
    .ad-icon-03 {
        background-image: url(../img/icon07.png);
        
    }
    .ad-icon-04 {
        background-image: url(../img/icon08.png);
        
    }
    .ad-cont {
        font-size: 1em;
        font-family: "microsoft yahei";
        color: #666;
    }
}
@media (max-width: 480px) {
    .advantage-body .ad-item {
        width: 100%;
        padding: 4px 0;
        font-size: 1rem;
    }
}

//layabox的产品家族
.laya-product {
    padding-top: 54px;
    padding-bottom: 102px;
    background-color: #0079d7;
}
.pro-title {
    h1 {
        text-align: center;
        color: #fffefe;
        font-size: 3.46em;
        margin-top: 40px;
        margin-bottom: 20px;
        line-height: 89px;
    }
}
@media (max-width: 768px) and (min-width: 480px) {
    .pro-title h1 {
        font-size: 3em;
    }
}
@media (max-width: 480px) {
    .pro-title h1 {
        font-size: 2em;
    }
}

.pro-item {
    height: 200px;
    padding-top: 20px;
    .pro-icon-bg {
        height: 110px;
        background-position: center;
        background-repeat: no-repeat;
    }
    .pro-icon01 {
        background-image: url(../img/icon09.png);
    }
    .pro-icon02 {
        background-image: url(../img/icon10.png);
    }
    .pro-icon03 {
        background-image: url(../img/icon11.png);
    }
    .pro-icon04 {
        background-image: url(../img/icon12.png);
    }
    .pro-icon05 {
        background-image: url(../img/icon13.png);
    }
    .pro-icon06 {
        background-image: url(../img/icon14.png);
    }
    .pro-cont {
        color: #fffefe;
        h3 {
            font-size: 2.35em;
            font-family: arial;
        }
        p {
            font-size: 1em;
            line-height: 30px;
            text-align: left;
        }
    }
}
//缩小屏幕时改变pro-item的高度，使其一行显示
 @media (max-width: 992px) {
    .pro-item {
        height: 300px;
    }
}

//laya游戏
.laya-game {
    padding: 40px 0;
}
.game-title {
    h1 {
        font-size: 2.475em;
        padding-bottom: 30px;
        text-align: left;
        margin: 40px 0 20px;
        color: #2a2a2a;
        font-family: "microsoft yahei";
    }
}
@media (max-width: 768px) {
    .game-title h1 {
        font-size: 1.5em;
        
    }
}

.game-more {
    padding-top: 50px;
    a {
        font-size: 1em;
        color: #2a2a2a;
        font-family: "microsoft yahei";
    }
}
//视频播放
.game-video {
    height: 210px;
    video {
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 992px) {
    .game-video {
        height: 264px;
    }
}
.game-item {
    width: 100%;
    float: left;
    position: relative;
    padding-top: 67px;
    img {
        margin: 5px 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .img-hover:hover {
        opacity: .8;
    }
    p {
        font-size: 1em;
        font-family: "microsoft yahei";
        color: #2a2a2a;
        text-align: center;
        margin-top: 5px;
    }
}

//合作伙伴
.partner {
    background-color: #f4f4f4;
    padding-bottom: 40px;
}
.partner-title {
    h2 {
        font-size: 2.142857em;
        font-family: "microsoft yahei";
        color: #2a2a2a;
        padding-bottom: 9px;
        margin: 40px 0 20px;
    }
}
.partner-title small {
    font-size: 0.374em;
}
.partner-logo {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 4px;
    border-radius: 4px;
    img {
        margin: 0 auto;
    }
    .img-hover:hover {
        opacity: 0.8;
    }
}
